<template>
	<view class="padding-top">
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 60rpx)">
				<view class="cu-item" 
				:class="index==tabCur?'text-blue cur':''" 
				v-for="(item,index) in list" 
				:key="index" @tap="TabSelect(index)">
					{{item.model}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 60rpx)"
			 :scroll-into-view="'main-'+mainCur" 
			 @scroll="VerticalMain">
				<view class="padding-top padding-lr" 
				v-for="(item,index) in list" 
				:key="index" 
				:id="'main-'+index">
					<view class="cu-bar solid-bottom bg-white radius">
						<view class="action">
							<text class="cuIcon-title text-blue"></text>{{item.model}}系列</view>
					</view>
					
						<view  class="cu-list grid col-2 padding-top-sm radius">
							<view class="cu-item align-center" 
							v-for="(i,index) of item.childList" 
							:key="index">
								<navigator :url="`/pages/create/create?model=${i.model}&typeid=${i.id}`">
									<image style="width: 110rpx;height: 110rpx;"
									:src="i.img" 
									mode="widthFix"></image>
									<text>{{i.model}}</text>
								</navigator>
							</view>
						</view>
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getPhone } from "../../api/index.js"
	
	export default {
		data() {
			return {
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true
			};
		},
		onLoad() {
			uni.showLoading({
				mask: true
			});
			this.getList()
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			async getList(){
				const {records} = await getPhone()
				console.log(records);
				this.list = records;
				this.listCur = this.list[0];
			},
			TabSelect(index) {
				this.tabCur = index;
				this.mainCur = index;
				this.verticalNavTop = (index - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				   return false  //支付宝小程序暂时不支持双向联动 
				// #endif
				console.log(e);
				let tabHeight = 0;
				const that = this
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().in(that).select("#main-" + i);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (i - 1) * 50
						this.tabCur = i
						return false
					}
				}
			}
		}
	}
</script>

<style>

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
		background-color: #fff;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		line-height: 50px !important;
		position: relative;
	}
.VerticalNav.nav .cu-item.cur{
	background-color: #f6f6f6;
}
	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		left: 12rpx;
		bottom: 0;
		margin: auto;
	}
	.VerticalBox {
		display: flex;
	}
	.VerticalMain {
		background-color: #f6f6f6;
		flex: 1;
	}
</style>
